import React, { Component, PropTypes } from 'react';
import gql from 'graphql-tag';
import { View, Text, StyleSheet } from 'react-native';
import { ListItem, CheckBox } from 'react-native-elements';
import { primaryColor } from '../utils';

const styles = StyleSheet.create({
  disabled: {
    color: 'gray'
  },
  checkbox: {
    backgroundColor: 'transparent',
    borderWidth: 0
  },
  heightLight: {
    color: primaryColor
  }
});

const SlotListItem = ({isflexible, checked, onSelect, onToggleFlixable, timeSlot:{display, value, message, enabled, flexible}}) => {
  return <ListItem leftIcon={{name:'timer'}} title={display} onPress={() => enabled&&onSelect(value)} titleStyle={enabled?undefined:styles.disabled}
    subtitle={
      <View>
        {message&&<Text style={styles.heightLight}>{message}</Text>}
        {checked&&flexible&&<CheckBox containerStyle={styles.checkbox} checked={isflexible} onPress={onToggleFlixable} title={flexible}/>}
      </View>
    } hideChevron={!enabled} rightIcon={enabled?{name:checked?'radio-button-checked':'radio-button-unchecked',color:checked?primaryColor:undefined}:undefined}/>
}

SlotListItem.fragments = {
  timeSlot: gql`
    fragment SlotListItem on TimeSlot {
      display
      value
      message
      enabled
      flexible
    }
  `
}

export default SlotListItem;
